<template>
  <div py-99 class="bg-#EEF2F7">
    <div text-center>
      <h1 text-40 mb-22>核心<span class="text-#448BF5">产品</span></h1>
      <div class="text-#5F6368 text-18 mb-83">
        我们提供安全可靠、功能强大的支付解决方案，满足您的业务需求
      </div>

    </div>
    <div class="flex items-center justify-center gap-48">
      <div v-for="(i, idx) in list" :key="idx" class="flex item">
        <div flex items-center justify-center w-222 :style="{ background: i.bgColor }" >
          <img :src="i.icon" alt="" class="h-96" />
        </div>
        <div px-40 flex-1 py-40 class="bg-#fff">
          <h1 text-28 text-center>
            {{ i.title }}
          </h1>
          <div h-116 mt-10 text-16 >
            {{ i.desc }}
          </div>
          <div pl-20 py-14 mb-32 h-440 flex flex-col gap-30 class="text-#5F6368 line-height-25" >
            <div v-for="(item, index) in i.list" :key="index">
              <div>
                {{ item.text }}
              </div>
            </div>
          </div>
          <div flex mt-19>
            <el-button type="primary" size="large" @click="jump('/apiDocs')">查看文档</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import alipay from '@/assets/image/alipay2.png'
import wechat from '@/assets/image/wechat2.png'
import { ref, reactive, shallowReactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const list = shallowReactive([
  {
    icon: wechat,
    title: '微信支付',
    desc: '全面支持微信支付生态，覆盖多种支付场景，为商户提供安全、便捷的收款服务',
    bgColor: 'rgba(9, 187, 7, 0.05)',
    list: [
      {
        text: '支持公众号支付、小程序支付、H5支付等多种方式'
      },
      {
        text: '资金直达商户账户，无需手动提现'
      },
      {
        text: '提供分账功能，满足平台型企业需求'
      },
      {
        text: '7×24小时交易监控，保障资金安全'
      },
      {
        text: '支持退款、对账单下载等全功能接口'
      }
    ]
  },
  {
    icon: alipay,
    title: '支付宝',
    desc: '全面接入支付宝开放平台，支持多种支付产品，满足不同场景的支付需求',
    bgColor: 'rgba(22, 119, 255, 0.05)',
    list: [
      {
        text: '支持手机网站支付、电脑网站支付、APP支付'
      },
      {
        text: '提供花呗分期、信用卡支付等增值服务'
      },
      {
        text: '资金实时到账，T+0结算模式'
      },
      {
        text: '提供支付宝红包、优惠券等营销工具'
      },
      {
        text: '支持多级商户体系，满足复杂业务结构'
      }
    ]
  }
])

const jump = (path: string) => {
  router.push(path)
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}
</script>

<style scoped lang="scss">
.item{
  width: 556px;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
</style>
